<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="qyTopFlex">
                    <div class="flexLeftBox">
                        <img class="qyLogoBox" :src="formData.logo" alt="" loading="lazy">
                    </div>
                    <div class="flexRightBox">
                        <div class="CardTitle">{{ formData.name || '' }}</div>
                        <div class="CardListType">
                            <div class="CardType">{{ formData.type || '' }}</div>
                        </div>
                        <div class="CardNrBox">
                            <div class="CardNrText">统一社会信用代码：{{ formData.unified_code || '' }}</div>
                            <div class="CardNrText">法定代表人：{{ formData.legal_representative || '' }}</div>
                            <div class="CardNrText">注册资本：{{ formData.registered_capital || '' }}万元</div>
                            <div class="CardNrText">成立日期：{{ formData.establish_date || '' }}</div>
                            <div class="CardNrText">地址：{{ formData.address || '' }}</div>
                            <div class="CardNrText">其他所属产业：{{ formData.suoshu_other_type || '' }}</div>
                            <div class="CardNrText">年销售额(万元)：{{ formData.year_sales || '' }}万元</div>
                            <template v-for="(item, index) in sysContactTypeData" :key="index">
                                <div class="CardNrText" v-if="item?.arr?.length > 0">
                                    <span>{{ item?.dictLabel }}：{{ item?.arr?.[0]?.contact }}</span>
                                    <el-popover placement="top-start" :title="item.dictLabel" :width="200"
                                        trigger="hover" v-if="item?.arr?.length > 1">
                                        <template #default>
                                            <div style="white-space: pre-line;">
                                                {{item.arr.map(c => c.contact).join('\n')}}
                                            </div>
                                        </template>
                                        <template #reference>
                                            <span>更多({{ item.arr.length }})</span>
                                        </template>
                                    </el-popover>
                                </div>
                            </template>
                            <div style="width: 100%;">简介：{{ formData.short_name }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 20px;">
                <template #header>
                    <div class="card-header">
                        <span style="color: #0084FF;font-weight: bold;font-size: 20px;">基本信息</span>
                    </div>
                </template>
                <div class="nrForBox" v-for="item in sysEnterpriseAttachmentTypeData">
                    <div class="jbxxTitle">{{ item.dictLabel }}</div>
                    <div class="imgNrBox" v-for="ite in item.arr" :key="ite.id">
                        <img style="width: 100%;" :src="store.imgfengMian + ite.file_path" alt="">
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import SearchTitle from '@/components/general/SearchTitle.vue';
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { UpdateEnterpriseSelectNo, queryEnterpriseInfo } from '@/api/api.js';
import { sysContactType, sysEnterpriseAttachmentType } from '@/api/dictionary.js';
import { useStore } from '@/store/store';
const store = useStore()
const route = useRoute();
const router = useRouter();
const formData = ref({});
const sysEnterpriseAttachmentTypeData = ref([]);
const sysContactTypeData = ref([]);
onMounted(() => {
    UpdateEnterpriseSelectNofun(route.query.id) // 热门企业点击加一
    sysContactTypeFun() // 企业联系方式类型字典
    sysEnterpriseAttachmentTypefun() // 企业附件类型字典
    if (route.query.id) {
        queryEnterpriseInfofun(route.query.id) // 企业详情信息
    }
});
const queryEnterpriseInfofun = async (id) => {
    const res = await queryEnterpriseInfo(id);
    if (res.code === 200) {
        formData.value = res.result;
        // 企业联系方式
        formData.value.contact?.forEach(contact => {
            const matchType = sysContactTypeData.value.find(
                t => t.dictValue === contact.lx_type
            );
            if (matchType) {
                matchType.arr.push(contact);
            }
        });
        // 封面图
        let url = res.result.picture.find(a => a.attachment_type === 'LOGO')?.file_path || ''
        formData.value.logo = url == 'UpLoadFiles\\qiye.png'?`https://image.pollinations.ai/prompt/公司大厦${formData.value.id}`:store.imgfengMian + url
        // 企业附件
        res.result.picture?.forEach(element => {
            const matchType = sysEnterpriseAttachmentTypeData.value.find(
                t => t.dictValue === element.attachment_type
            );
            if (matchType) {
                matchType.arr.push(element);
            }
        });
    } else {
        return null;
    }
};
// 企业联系方式类型字典
const sysContactTypeFun = async () => {
    const res = await sysContactType();
    res.data.forEach(element => {
        sysContactTypeData.value.push({
            dictValue: element.dictValue,
            dictLabel: element.dictLabel,
            arr: []
        })
    });
};
// 企业附件类型字典
const sysEnterpriseAttachmentTypefun = async () => {
    const res = await sysEnterpriseAttachmentType();
    res.data.forEach(element => {
        if (element.dictValue === 'LOGO') return;
        sysEnterpriseAttachmentTypeData.value.push({
            dictValue: element.dictValue,
            dictLabel: element.dictLabel,
            arr: []
        })
    });
}
// 热榜点击加一
const UpdateEnterpriseSelectNofun = async (id) => {
    const res = await UpdateEnterpriseSelectNo(id);
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.qyTopFlex {
    display: flex;
    gap: 15px;

    .flexLeftBox {
        width: 15%;
        flex-shrink: 0;

        .qyLogoBox {
            width: 160px;
            height: 160px;
        }

    }

    .flexRightBox {
        width: 85%;
        flex-grow: 1;

        .CardTitle {
            font-weight: bold;
            font-size: 28px;
            color: #1F1F1F;
        }

        .CardListType {
            display: flex;
            margin-top: 10px;

            .CardType {
                background: #D6F4FF;
                padding: 4px 8px;
                border-radius: 4px;
                font-weight: 300;
                font-size: 12px;
                color: #0084FF;
                margin-bottom: 16px;
            }
        }

        .CardNrBox {
            border-radius: 8px;
            border: 1px solid #F1F1F1;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            font-weight: 300;
            font-size: 14px;
            color: #1F1F1F;

            .CardNrText {
                width: calc(50% - 5px);

                span {
                    margin-right: 20px;
                    cursor: pointer;
                }
            }
        }

    }
}

.nrForBox {
    margin: 15px 0;
    &:first-child {
        margin-top: 0;
    }

    .jbxxTitle {
        font-weight: bold;
        font-size: 16px;
        color: #1F1F1F;
    }

    .imgNrBox {
        width: 80%;
        margin: 0 auto;
    }
}
</style>